<template>
    <el-button type="danger" @click="multipleDelete" :disabled="!selected.length" plain>删除选中</el-button>
</template>

<script>
    export default {
        name: "multipleDelete",
        props: {
            selected: Array,
            destroy: Promise,
            processed: Function,
        },
        data () {
            return {

            };
        },
        methods: {
            multipleDelete() {
                let $processing = () => {
                    if (!this.selected.length) {
                        $processed();
                        return ;
                    }
                    let id = this.selected.shift().id;
                    this.destroy(id).then(res => {
                        $processing();
                    }).catch(error => {
                        this.$message.error('ID: ' + id + ' 删除失败!');
                    });
                };
                let $processed = () => {
                    this.loading = false;
                    this.$message.success('删除成功!');
                    if (this.processed) this.processed();
                };
                this.$confirm('批量删除后将无法恢复, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    $processing();
                });
            },
        }
    }
</script>

<style scoped>

</style>
